<!-- videoTabBar.vue -->
<template>
    <view class="tab-bar">
        <view class="tab-bar__wrapper">
            <scroll-view scroll-x="true" class="tab-bar__items" >
                <view 
                class="tab-bar__item"
                v-for="(item, index) in props.tabBarItems"
                :key="item.id"
                :class="{'tab-bar__item--active': index === videoTabBarActive}"
                @click="onChangeActive(index)"
                >
                    {{ item.label }}
                </view>
            </scroll-view>
            
            <image src="@/static/menu.png" mode="aspectFill" class="tab-bar__icon" @click="onMenuClick"></image>
        </view>
    </view>
</template>

<script setup>
import { onMounted, ref } from 'vue';

const props = defineProps({
    tabBarItems: {
        type: Array,
    }
})

const emit = defineEmits(['tab-change', 'menu-click']);

function onChangeActive(index) {
    videoTabBarActive.value = index;
    emit('tab-change', props.tabBarItems[index]);
}

function onMenuClick() {
    emit('menu-click');
}

const videoTabBarActive = ref(0);

onMounted(() => {
    console.log('props: ', props.tabBarItems);
})
</script>

<style lang="scss" scoped>
.tab-bar{
	width: 100%;
	height: 100rpx;
	background-color: #f7f7f9;
	&__wrapper{
		width: 95%;
		height: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
	}
	
	&__items{
		width: 90%;
		height: 100%;
		white-space: nowrap;
	}
	
	&__item{
		width: fit-content;
		height: 100%;
		line-height: 100rpx;
		padding: 0 .3em;
		margin: 0 .2em;
		font-size: 40rpx;
		text-align: center;
		color: #000;
		display: inline-block;
		
		&--active{
			color: #fe5100;
		}
	}
	
	&__icon{
		width: 40rpx;
		height: 40rpx;
		padding: 10rpx 5rpx;
		margin: 0 10rpx;
		object-fit: cover;
	}
}
</style>